<template>
	<jk-dialog
		v-model="showDialog"
		title="故障呼叫"
		width="800px"
		:show-content-loading="showLoading"
		:confirm-btn-loading="confirmBtnLoading"
		@on-cancel="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
		@on-confirm="onConfirmBtn"
	>
		<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" :show-message="false">
			<el-tag class="margin-bottom-4" type="primary" effect="plain">
				<span class="el-icon-tickets item-gap"></span>
				<span>基本信息</span>
			</el-tag>
			<jk-card class="margin-bottom-20">
				<el-row>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="设备编号">
							<span class="read-only-2">{{ ruleForm.machineCode }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="设备名称">
							<span class="read-only-2">{{ ruleForm.machineName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-0" label="所属工序">
							<span class="read-only-2">{{ ruleForm.processName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-0" label="所属区域">
							<span class="read-only-2">{{ ruleForm.workshopName }}</span>
						</el-form-item>
					</el-col>
				</el-row>
			</jk-card>
			<el-tag class="margin-bottom-4" type="primary" effect="plain">
				<span class="el-icon-c-scale-to-original item-gap"></span>
				<span>故障信息</span>
			</el-tag>
			<jk-card class="margin-bottom-20">
				<el-row>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="故障时间" prop="faultTime">
							<jk-date-picker v-model="ruleForm.faultTime" type="datetime" size="medium" placeholder="故障时间" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="故障等级" prop="faultLevelId">
							<jk-select v-model="ruleForm.faultLevelId" :popper-append-to-body="false" size="medium" :option-list="faultLevelList" placeholder="故障等级" class="width-100-percent" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="故障分类">
							<jk-select v-model="ruleForm.faultTypeId" :option-list="faultTypeList" :popper-append-to-body="false" size="medium" placeholder="故障分类" class="width-100-percent" clearable @change="onFaultTypeChange"></jk-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="故障项目">
							<jk-select v-model="ruleForm.faultId" size="medium" :popper-append-to-body="false" :option-list="faultItemList" placeholder="故障项目" class="width-100-percent" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item class="margin-bottom-0" label="故障现象">
							<el-input v-model="ruleForm.faultDescription" type="textarea" :row="2" placeholder="故障现象" />
						</el-form-item>
					</el-col>
				</el-row>
			</jk-card>
			<el-tag class="margin-bottom-4" type="primary" effect="plain">
				<span class="el-icon-phone item-gap"></span>
				<span>维修要求</span>
			</el-tag>
			<jk-card>
				<el-row>
					<el-col :span="12">
						<el-form-item class="margin-bottom-0" label="指定维修人">
							<remote-search-emp-input
								:popper-append-to-body="false"
								:modal="false"
								placeholder="指定维修人"
								only-key="repairmanId"
								query-name="repairmanName"
								:form-data="ruleForm"
								@on-select="onSelectEmpChange"
							></remote-search-emp-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-0" label="复机时间">
							<jk-date-picker v-model="ruleForm.restartTime" type="datetime" size="medium" placeholder="复机时间" />
						</el-form-item>
					</el-col>
				</el-row>
			</jk-card>
		</el-form>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-table-height';
    import {
        machineManagerRepairOrderCreate
    } from '../../../../api/machine/repairOrder';
    import {
        spinFaultTypePage
    } from '../../../../api/machine/faultCategory';
    import { formatTime } from '../../../../utils/jk/jk-tool';
    import remoteSearchEmpInput from '../../../production/order/components/remote-search-emp-input';
    import { spinFaultItemPage } from '../../../../api/machine/faultItem';
    export default {
        components: {
            remoteSearchEmpInput
        },
        props: {
            dataItem: {
                type: Object,
                default() {
                    return {};
                }
            },
            dialogState: {
                type: Boolean,
                default: false
            }
        },
        mixins: [calHeight],
        data() {
            return {
                faultItemList: [],
                faultLevelList: [
                    { id: 1, name: '高' },
                    { id: 2, name: '中' },
                    { id: 3, name: '低' }
                ],
                faultTypeList: [],
                showDialog: false,
                showLoading: true,
                confirmBtnLoading: false,
                ruleForm: {
                    'beginTime': '',
                    'callId': null,
                    'callName': '',
                    'callTime': '',
                    'endTime': '',
                    'faultCauseCode': '',
                    'faultCauseId': null,
                    'faultCauseName': '',
                    'faultCode': '',
                    'faultDescription': '',
                    'faultId': null,
                    'faultLevelId': null,
                    'faultLevelName': '',
                    'faultName': '',
                    'faultTypeCode': '',
                    'faultTypeId': null,
                    'faultTypeName': '',
                    'ifReplace': true,
                    'ifShutdown': true,
                    'machineCode': '',
                    'machineId': null,
                    'machineName': '',
                    'processCode': '',
                    'processId': null,
                    'processName': '',
                    'repairDescription': '',
                    'repairmanId': null,
                    'repairmanName': '',
                    'repairmanTime': '',
                    'restartTime': '',
                    'workshopCode': '',
                    'workshopId': null,
                    'workshopName': '',
                    faultTime: ''
                },
                rules: {
                    code: [{ required: true, trigger: 'change' }],
                    faultTypeId: [{ required: true, trigger: 'change' }],
                    faultTime: [{ required: true, trigger: 'change' }]
                }
            };
        },
        methods: {
            onFaultTypeChange() {
                this.$set(this.ruleForm, 'faultId', null);
                this.$set(this.ruleForm, 'faultName', null);
                this.getFaultItemListRequest();
            },
            getFaultItemListRequest() {
                if (this.ruleForm.faultTypeId) {
                    return spinFaultItemPage({
                        auditState: 1,
                        faultTypeId: this.ruleForm.faultTypeId
                    }).then(res => {
                        if (res.data.status === 200) {
                            this.faultItemList = res.data.res || [];
                        }
                    });
                }
            },
            onSelectEmpChange(e) {
                if (Object.keys(e).length) {
                    this.$set(this.ruleForm, 'repairmanId', e.id);
                    this.$set(this.ruleForm, 'repairmanName', e.name);
                }
            },
            getParamData() {
                const params = JSON.parse(JSON.stringify(this.ruleForm));
                const faultTypeItem = this.faultTypeList.find(x => x.id === params.faultTypeId) || {};
                params.faultTypeCode = faultTypeItem.code;
                params.faultTypeName = faultTypeItem.name;

                const faultLevelItem = this.faultLevelList.find(x => x.id === params.faultLevelId) || {};
                params.faultLevelName = faultLevelItem.name;

                const faultItem = this.faultItemList.find(x => x.id === params.faultId) || {};
                params.faultCode = faultItem.code;
                params.faultName = faultItem.name;
                return params;
            },
            createAndUpdateRequest() {
                this.confirmBtnLoading = true;
                machineManagerRepairOrderCreate(this.getParamData()).then(res => {
                    this.confirmBtnLoading = false;
                    if (res.data.status === 200) {
                        this.$tipsBar(this, 'save');
                        this.$emit('on-finish');
                    }
                });
            },
            onConfirmBtn() {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        this.createAndUpdateRequest();
                    } else {
                        this.$tipsBar(this, 'validator');
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                    this.$nextTick(() => {
                        this.$refs.ruleForm.resetFields();
                    });
                }
            },
            getFaultCategoryListRequest() {
                return spinFaultTypePage({ auditState: 1 }).then(res => {
                    if (res.data.status === 200) {
                        this.faultTypeList = res.data.res;
                    }
                });
            },
            async getDependentData() {
                this.showLoading = true;
                this.$set(this.ruleForm, 'callId', this.$store.state.user.empInfo.id);
                this.$set(this.ruleForm, 'callName', this.$store.state.user.empInfo.name);
                this.$set(this.ruleForm, 'callTime', formatTime(Date.now()));
                this.$set(this.ruleForm, 'faultTime', formatTime(Date.now()));
                this.$set(this.ruleForm, 'restartTime', formatTime(Date.now()));
                const cpData = JSON.parse(JSON.stringify(this.dataItem));
                this.$set(this.ruleForm, 'machineId', cpData.machineId);
                this.$set(this.ruleForm, 'machineCode', cpData.machineCode);
                this.$set(this.ruleForm, 'machineName', cpData.machineName);

                this.$set(this.ruleForm, 'processId', cpData.processId);
                this.$set(this.ruleForm, 'processCode', cpData.processCode);
                this.$set(this.ruleForm, 'processName', cpData.processName);

                this.$set(this.ruleForm, 'workshopId', cpData.workshopId);
                this.$set(this.ruleForm, 'workshopCode', cpData.workshopCode);
                this.$set(this.ruleForm, 'workshopName', cpData.workshopName);

                await this.getFaultCategoryListRequest();
                this.showLoading = false;
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.getDependentData();
                }
            }
        }
    };
</script>
